<template>
  <div class="personal-center">
    <el-card class="personal-info" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <h2 class="title-style">业主个人中心</h2>
      <el-form :model="userInfo" label-width="120px"> <!-- 调整标签宽度 -->
        <el-row :gutter="30" class="center-row" style="width: 100%;"> <!-- 增大列间距，设置宽度为100% -->
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="userInfo.name" :disabled="!isEdit" class="disabled-style" style="padding: 0 10px;"> <!-- 给输入框添加内边距 -->
              </el-input>
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="userInfo.account" :disabled="!isEdit" class="disabled-style" style="padding: 0 10px;">
              </el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userInfo.password" :disabled="!isEdit" class="disabled-style" type="password" style="padding: 0 10px;">
              </el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userInfo.sex" :disabled="!isEdit" class="disabled-style" style="padding: 0 10px;">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号码">
              <el-input v-model="userInfo.identification" disabled class="disabled-style" style="padding: 0 10px;">
              </el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.phone" :disabled="!isEdit" class="disabled-style" style="padding: 0 10px;">
              </el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userInfo.email" :disabled="!isEdit" class="disabled-style" style="padding: 0 10px;">
              </el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="userInfo.age" :disabled="!isEdit" class="disabled-style" style="padding: 0 10px;">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="width: 100%;">
          <el-col :span="24">
            <div class="button-container">
              <template v-if="!isEdit">
                <el-button type="primary" @click="isEdit = true">修改信息</el-button>
              </template>
              <template v-else>
                <el-button type="primary" @click="handleSaveEdit">保存修改</el-button>
                <el-button type="default" @click="handleCancelEdit" style="margin-left: 10px">取消修改</el-button>
              </template>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

const userInfo = ref({
  id: "",
  name: "",
  account: "",
  password: "",
  sex: "",
  age: 0,
  identification: "",
  phone: "",
  email: "",
  communityId: "",
  createTime: ""
});
const isEdit = ref(false);
const originalUserInfo = ref({});

onMounted(async () => {
  try {
    const token = localStorage.getItem('token');
    if (!token) {
      console.error('未找到token，请先登录');
      return;
    }
    const config = {
      headers: {
        Authorization: `Bearer ${token}`
      }
    };
    const response = await axios.get('/api/users/personal', config);
    console.log("获取业主个人信息", response);
    userInfo.value = response.data.data;
    originalUserInfo.value = {...userInfo.value };
  } catch (error) {
    console.error('获取个人信息失败', error);
  }
});

const handleSaveEdit = async () => {
  try {
    const token = localStorage.getItem('token');
    if (!token) {
      console.error('未找到token，请先登录');
      return;
    }
    const responses = await axios.put('/api/users/personalUpdate', null, {
      headers: {
        Authorization: `Bearer ${token}`
      },
      params: {
        name: userInfo.value.name,
        account: userInfo.value.account,
        password: userInfo.value.password,
        sex: userInfo.value.sex,
        age: userInfo.value.age,
        phone: userInfo.value.phone,
        identification: userInfo.value.identification,
        email: userInfo.value.email
      }
    });
    if (responses.data.code === 200) {
      ElMessage.success("修改业主个人信息成功");
    } else {
      ElMessage.error("修改业主个人信息失败");
    }
    const response = await axios.get("/api/users/personal", {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    if (response.data.code === 200) {
      userInfo.value = response.data.data;
      originalUserInfo.value = {...userInfo.value };
      console.log('业主个人信息修改成功');
    } else {
      ElMessage.error("获取更新后的业主信息失败");
    }
    isEdit.value = false;
  } catch (error) {
    console.error('保存信息失败', error);
  }
};

const handleCancelEdit = () => {
  userInfo.value = {...originalUserInfo.value };
  isEdit.value = false;
};
</script>

<style scoped>
.personal-center {
  padding: 15px;
  display: flex;
  width: 100%;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中，可按需选择是否添加 */
}

.personal-info {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  width: 80%;
  min-height: 400px; /* 添加最小高度，使卡片内容布局更稳定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title-style {
  margin-bottom: 20px;
  color: #136bbd;
}

.disabled-style {
  cursor: default;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.el-input {
  height: 32px;
  line-height: 32px;
}

.center-row {
  display: flex;
  justify-content: center;
}
</style>